<script type="text/x-template" id="base-config-form">
    <div>
        <el-form :rules="rules" ref="codeGenForm" :model="data" label-width="170px">
            <el-form-item label="数据库URL" prop="dataSourceConfig.url">
                <el-input v-model.trim="data.dataSourceConfig.url"></el-input>
            </el-form-item>
            <el-form-item label="数据库账号" prop="dataSourceConfig.username">
                <el-input v-model.trim="data.dataSourceConfig.username"></el-input>
            </el-form-item>
            <el-form-item label="数据库密码" prop="dataSourceConfig.password">
                <el-input v-model.trim="data.dataSourceConfig.password" type="password"></el-input>
                <el-button type="primary" @click="testDbConn">
                    验证数据库连接
                </el-button>
            </el-form-item>
            <el-form-item label="开发者" prop="author">
                <el-input v-model.trim="data.author"></el-input>
            </el-form-item>
            <el-form-item label="使用项目路径" prop="useProjectPath">
                <el-radio-group
                        v-model="data.useProjectPath"
                >
                    <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                        item.label
                        }}
                    </el-radio>
                </el-radio-group>
                <span class="tip-info">*注:使用项目路径，代码将直接生成到项目对应路径</span>
            </el-form-item>
            <template v-if="data.useProjectPath === 0">
                <el-form-item label="生成目录" prop="outputDir">
                    <el-input v-model.trim="data.outputDir"></el-input>
                </el-form-item>
                <el-form-item label="完成后是否打开目录" prop="openDirAfterDone">
                    <el-radio-group
                            v-model="data.openDirAfterDone"
                    >
                        <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                            item.label
                            }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
        </el-form>
    </div>
</script>

<script>
    Vue.component('base-config-form', {
        template: '#base-config-form',
        data() {
            return {
                //前端页面-是否本地运行选项的禁用,true-禁用
                disableLocalRunning: false,
                urls: {
                    testDbConn: '/v1/codeGen/testDbConn',
                    configInfo: '/v1/codeGen/configInfo',
                },
                TRUE_FALSE_DICT: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
                rules: {
                    'dataSourceConfig.url': [
                        {required: true, message: '请输入数据库URL', trigger: 'blur'}
                    ],
                    'dataSourceConfig.username': [
                        {required: true, message: '请输入数据库账号', trigger: 'blur'}
                    ],
                    'dataSourceConfig.password': [
                        {required: true, message: '请输入数据库密码', trigger: 'blur'}
                    ],
                    author: [
                        {required: true, message: '请输入作者', trigger: 'blur'}
                    ],
                    outputDir: [
                        {required: true, message: '请输入代码生成目录', trigger: 'blur'}
                    ],
                }
            }
        },
        props: ['data'],
        computed: {},
        methods: {
            testDbConn() {
                let data = {};
                data.url = this.data.dataSourceConfig.url;
                data.username = this.data.dataSourceConfig.username;
                data.password = this.data.dataSourceConfig.password;
                this.ajax(this.urls.testDbConn, data, function (result) {
                    if (result.success) {
                        this.$message({
                            showClose: true,
                            message: '连接成功',
                            type: 'success'
                        })
                    } else {
                        this.$message(result.msg);
                    }
                }.bind(this));
            },
            //校验
            validateFormData(cb) {
                this.$refs.codeGenForm.validate(function (valid) {
                    if (valid) {
                        cb()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请把表单填写完整'
                        })
                        cb(true)
                    }
                }.bind(this))
            },
        },
        watch: {},
        mounted() {

        },
        created() {

        }
    })
</script>
